// $(function() {
    var getdata='';
    var date= new Date;
    var year=date.getFullYear();
    var month=date.getMonth()+1;
    month =(month<10 ? "0"+month:month); 
    var mydate = (year.toString()+"-"+month.toString());
    getdata =mydate;
    laydate.render({ 
    elem: '#yearselect',
    type: 'month',
    value:mydate,
    max: mydate,
    done: function(value, date){
        getdata = value;
        getLineData();
        // alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
    }
  });


    var myChart = echarts.init(document.getElementById('echartsBox'));
    var lineChart = echarts.init(document.getElementById('echartsBoxline'));
    var giftImageUrl = "/img/chongdian.png"
    var chartName= ['离线', '故障', '正常'];
    var chartData= ['10','20','30']
    var data=[]
    var legendName=[];
    var terminalNum="123"
    for (var i=0;i<chartData.length;i++){
        var c={
            value:chartData[i],
            name:chartName[i]
        }
        data[i]=c;
        legendName[i]=chartName[i];
    }
    console.log(legendName)
    option = {
        backgroundColor: '#fff',
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {d}% "
        },
        graphic: {
            elements: [{
                type: 'image',
                style: {
                    image: giftImageUrl,
                    width: 20,
                    height: 20
                },
                left: '37%',
                top: '30%'
            }]
        },
        title: {
            text: terminalNum,
            left: '40%',
            top: '35%',
            padding: [24, 0],
            textAlign: "center",
            textStyle: {
                color: '#00C484',
                fontSize: 20,
                align: 'center',
                width:"100%",
            },
            subtext:"终端数",
            subtextStyle: {
                "fontSize": 14,
                "color": '#888'
            }
        },
        legend: {
            orient: 'vertical',
            x: '75%',
            y:'center',
            itemWidth: 8,
            itemHeight: 8,
            itemRadius:8,
            icon: 'circle',
            align: 'left',
            textStyle: {
                fontSize:14,
                color: '#666',
               
            },
            data: legendName
        },
        series: [{
            type: 'pie',
            radius: ['60%', '85%'],
            center: ['40%', '50%'],
            color: ['#C2F3DA', '#F8B551', '#00C484'],
            data: data,
            labelLine: {
                normal: {
                    show: false,
                    length: 20,
                    length2: 20,
                    lineStyle: {
                        color: '#12EABE',
                        width: 2
                    }
                }
            },
            label: {
                normal: {
                    show:false,
                    formatter: '{c|{c}}\n{hr|}\n{d|{d}%}',
                    rich: {
                        b: {
                            fontSize: 20,
                            color: '#12EABE',
                            align: 'left',
                            padding: 4
                        },
                        hr: {
                            borderColor: '#12EABE',
                            width: '100%',
                            borderWidth: 2,
                            height: 0
                        },
                        d: {
                            fontSize: 20,
                            color: '#fff',
                            align: 'left',
                            padding: 4
                        },
                        c: {
                            fontSize: 20,
                            color: '#fff',
                            align: 'left',
                            padding: 4
                        }
                    }
                }
            }
        }]
    };
    
// })




myChart.setOption(option);


gettotaldata();
function gettotaldata(){
    
    $.ajax({
        type: "POST",
        url: "/business/sysView/getCountAll",
        success: function(data){
            console.log(data);
        },
        error:function(e){
            console.log(e);
        }
    });
}
function getPicData(){
    $.ajax({
        type: "POST",
        url: "/business/sysView/getRealState",
        data: {},
        success: function(data){
            console.log(data);
        },
        error:function(e){
            console.log(e);
        }
    });
}
getLineData();
function getLineData(){
    $.ajax({
        type: "get",
        url: "/business/sysView/getSumAll",
        data: {
            day: getdata,
        },
        success: function(data){
            console.log(data);
            if(data.length>0){
                lineEcart(data)
            }
        },
        error:function(e){
            console.log(e);
        }
    });
}

function lineEcart(linedata){
    // var eacrtDa={
    //     dayArr:[],
    //     dnArr:[],
    //     pnArr:[]
    // }
    // linedata.forEach(function(item,index){
    //     eacrtDa.dayArr.push(item.DAY);
    //     eacrtDa.dnArr.push(item.DN_SUM);
    //     eacrtDa.pnArr.push(item.PN_SUM);
    // });
    var charts = {
        name:["充电量","充电金额"],
        lineX: ['2018-11-11 17:01', '2018-11-11 17:02', '2018-11-11 17:03', '2018-11-11 17:04', '2018-11-11 17:05', '2018-11-11 17:06', '2018-11-11 17:07', '2018-11-11 17:08', '2018-11-11 17:09', '2018-11-11 17:10', '2018-11-11 17:11', '2018-11-11 17:12', '2018-11-11 17:13', '2018-11-11 17:14', '2018-11-11 17:15', '2018-11-11 17:16', '2018-11-11 17:17', '2018-11-11 17:18', '2018-11-11 17:19', '2018-11-11 17:20'],
        value: [
            [451, 352, 303, 534, 95, 236, 217, 328, 159, 151, 231, 192, 453, 524, 165, 236, 527, 328, 129, 530],
            [360, 545, 80, 192, 330, 580, 192, 80, 250, 453, 352, 28, 625, 345, 65, 325, 468, 108, 253, 98]
        ]
    
    }

    var color = [ 'rgba(34, 181, 115, 1)','rgba(248, 181, 81, 1)']
    var lineY = [];
    for (var i = 0; i < charts.name.length; i++) {
        var x = i
        if (x > color.length - 1) {
            x = color.length - 1
        }
        var data = {
            name: charts.name[i],
            type: 'line',
            color: color[x] ,
            smooth: true,
            symbol: 'circle',
            symbolSize: 6,
            data: charts.value[i],
            itemStyle: {
                normal: {
                    borderColor: '#fff',
                    borderWidth: 2,
                }
            },  
        }
        
        lineY.push(data)
    }
    var optionline = {
        backgroundColor:'#fff',
        tooltip: {
            trigger: 'axis'
        },
        
        grid: {
            top: '5%',
            left: '4%',
            right: '4%',
            bottom: '12%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: charts.lineX,
            axisTick: {
                show: false
            },
            axisLabel: {
                textStyle: {
                    color: '#B2B3B8',
                    width:"0"
                },
                formatter: function(params) {
                    return params.split(' ')[0] + '\n' + params.split(' ')[1]
                }
            },
            axisLine: {
                show:true,
                lineStyle: {
                    color: '#B2B3B8'
                }
            }
        },
        yAxis: {
            name: charts.unit,
            type: 'value',
            axisTick: {
                show: false
            },
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: '#B2B3B8'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#ECEDF2',
                    type:'dashed'
                }
            },
            axisLine: {
                show:false,
                lineStyle: {
                    color: 'rgb(0,253,255,0.6)'
                }
            }
        },
        series: lineY
    }
    lineChart.setOption(optionline);
}